
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击按钮显示图片</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            width: 500px;
            border: 1px solid #ccc;
            margin: 100px auto;
            list-style-type: none;
            overflow: hidden;
            padding: 10px;
        }
        ul li{
            width: 150px;
            height: 93px;
            float: left;
            border: 1px solid #ccc;
            margin-left: 11px;
        }
        ul li img{
            width: 100%;
            height: 100%;
        }
        input{
            width: 100px;
            height: 30px;
            background: #58b9e1;
            color: #fff;
            border: none;
            cursor: pointer;
            display: block;
            margin: 30px auto;
        }
        .a1{
            text-decoration: none;
            display: block;
            width: 100px;
            height: 50px;
            background: #008ce1;
            color: white;
            margin: 50px auto;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
<input type="button" value="加载" id="btn">
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>
<script>
    var btn=document.getElementById("btn");
    var ali=document.getElementsByTagName("li");
    var arrImg=["img/tour6.jpg","img/tour7.jpg;","img/tour6.jpg"];
    btn.onclick=function(){
        for ( var i=0;i<ali.length;++i){
            ali[i].innerHTML="<img src="+arrImg[i]+">";
        }
    }
</script>